<template>
  <div class="grid-wrapper">
    <s-row class="row">
      <s-col class="item" span="24">col-24</s-col>
    </s-row>
    <s-row>
      <s-col class="item" span="12">col-12</s-col>
      <s-col class="item" span="12">col-12</s-col>
    </s-row>
    <s-row class="row">
      <s-col class="item" span="8">col-8</s-col>
      <s-col class="item" span="8">col-8</s-col>
      <s-col class="item" span="8">col-8</s-col>
    </s-row>
    <s-row class="row">
      <s-col class="item" span="6">col-6</s-col>
      <s-col class="item" span="6">col-6</s-col>
      <s-col class="item" span="6">col-6</s-col>
      <s-col class="item" span="6">col-6</s-col>
    </s-row>
  </div>
</template>

<script>
import Row from "../../../src/components/Row.vue";
import Col from "../../../src/components/Col.vue";
export default {
  components: {
    "s-row": Row,
    "s-col":Col
  },

};
</script>

<style lang="scss" scoped>
  *{
    box-sizing: border-box;
  }
  .grid-wrapper{
    $background: #3eaf7c;
    > .row{ padding: .2em;
      > .item { text-align: center; color: white;
        &:nth-child(odd){ background: $background; }
        &:nth-child(even){ background: lighten($background,20%); color: black; }
      }
    }
  }
</style>